<template>
  <div class="df-form-control">
    <div class="radio" v-for="(item, index) in field.dataSource">
      <label :class="{checked: getValue(item) === value, disabled: disabled}"
             @click.stop.prevent="onChange" :key="getValue(item)">
        <input
          type="radio"
          :name="field.name"
          :value="index"
          :disabled="disabled">
        {{ getLabel(item) }}
      </label>
    </div>
  </div>
</template>

<script>
  import _ from 'lodash'

  export default {
    props: {
      value: {},
      field: Object,
      disabled: Boolean
    },
    mounted () {
      if (!this.field.dataSource) {
        this.field.dataSource = []
      }
    },
    methods: {
      onChange (e) {
        if (e.target.tagName === 'LABEL') {
          if (this.disabled) {
            return
          }
          let val = +e.target.children[0].value
          val = this.field.valueProp ? _.map(this.field.dataSource, this.field.valueProp)[val] : this.field.dataSource[val]
          this.$emit('input', val, e)
        }
      },
      getLabel (item) {
        if (this.field.labelProp) {
          return item[this.field.labelProp]
        }
        return item
      },
      getValue (item) {
        if (this.field.valueProp) {
          return item[this.field.valueProp]
        }
        return item
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../css/variables";

  @mixin radio-variant($parent, $color) {
    .radio#{$parent} label{
      &:before{
        background: #fff;
        border-color: lighten($color, 10%);
      }
      &.checked:after{
        background: $color;
      }
    }
  }

  .df-form-control{
    border: none !important;
  }

  .radio{
    display: inline-block;
    margin: 0;
    &:not(:first-child){
      margin-left: 10px;
    }
    label{
      position: relative;
      display: inline-block;
      min-height: 20px;
      padding-left: 22px;
      margin-bottom: 0;
      font-weight: normal;
      cursor: pointer;

      &.disabled{
        opacity: .6;
        cursor: not-allowed;
      }
    }
    label:before{
      content: ' ';
      position: absolute;
      left: 3px;
      top: 50%;
      transform: translateY(-50%);
      color: transparent;
      height: 16px;
      width: 16px;
      background: #fff;
      display: inline-block;
      border: 1px solid #ccc;
      border-radius: 50%;
    }
    label:after{
      content: ' ';
      position: absolute;
      left: 6px;
      top: 50%;
      transform: translateY(-50%);
      width: 10px;
      height: 10px;
      background: transparent;
      border-radius: 50%;
      display: inline-block;
    }
    label.checked:after{
      background: #333;
    }

    input{
      visibility: hidden;
    }
  }

  @include radio-variant('.radio-primary', $brand-primary);
  @include radio-variant('.radio-danger', $brand-danger);
  @include radio-variant('.radio-info', $brand-info);
  @include radio-variant('.radio-warning', $brand-warning);
  @include radio-variant('.radio-success', $brand-success);
</style>
